<template>
  <Card>
    <Form
      ref="formValidate"
      :model="formValidate"
      :rules="ruleValidate"
      :label-width="200"
    >
      <FormItem label="开启状态" prop="enable">
        <RadioGroup v-model="formValidate.enable">
          <Radio label="1">开启</Radio>
          <Radio label="0">关闭</Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="积分抵现比例" prop="discountRate">
        <div>
          <Input
            placeholder="请输入整数"
            type="number"
            v-model="formValidate.discountRate"
            :disabled="isEmit"
          ></Input>
          <div>积分=1元，即多少积分可抵扣1元</div>
        </div>
      </FormItem>
      <FormItem label="积分抵现上限" prop="maxDiscount">
        <div>
          <Input
            placeholder="请输入金额"
            type="number"
            v-model="formValidate.maxDiscount"
            :disabled="isEmit"
          ></Input>
          <div>即每个订单可用积分抵扣的金额上限</div>
        </div>
      </FormItem>
      <FormItem label="满多少可使用积分抵现" prop="threshold">
        <div>
          <Input
            placeholder="请输入金额"
            type="number"
            v-model="formValidate.threshold"
            :disabled="isEmit"
          ></Input>
          <div>即满多少积分可以使用积分抵扣（0为都可使用）</div>
        </div>
      </FormItem>
      <FormItem label="积分清零" prop="clearStatus">
        <RadioGroup v-model="formValidate.clearStatus">
          <Radio label="0" :disabled="isEmit">不清零</Radio>
          <div>
            <Radio label="1" :disabled="isEmit">自然年清零上一年积分</Radio>
            <div>(例：2022年年底清空2021年获得的积分)</div>
          </div>
        </RadioGroup>
      </FormItem>
      <FormItem label="使用规则" prop="pointRule">
        <Input
          :disabled="isEmit"
          placeholder="请输入使用规则"
          type="textarea"
          :maxlength="200"
          v-model="formValidate.pointRule"
        ></Input>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="handleSubmit('formValidate')"
          >保存</Button
        >
        <!-- <Button @click="handleReset('formValidate')" style="margin-left: 8px"
          >Reset</Button
        > -->
      </FormItem>
    </Form>
  </Card>
</template>
<script>
import { creditForCash, setCreditForCash } from "@/api/shopNewApi.js";
export default {
  data() {
    const validateDiscountRate = (rule, value, callback) => {
                if (value<=0 || value>100 ) {
                    callback(new Error('积分抵现比例必须大于0且小于等于100'));
                } else {
                    callback();
                }
            };
    const validatePass = (rule, value, callback) => {
      if (this.formValidate.enable == "0") {
        callback();
      } else {
        if (value == "") {
          callback(new Error(rule.message));
        } else {
          callback();
        }
      }
    };
    return {
      isEmit: false,
      formValidate: {
        clearStatus: "", //积分是否清零  0不清零 1 自然年清零
        discountRate: "1", //抵现比列
        enable: "", //是否开启 0 关闭 1开启
        maxDiscount: "", //积分抵现上线
        pointRule: "", //规则
        threshold: "", //满多少使用
      },
      ruleValidate: {
        pointRule: [
          {
            required: true,
            validator: validatePass,
            trigger: "blur",
            message: "请输入使用规则",
          },
        ],
        clearStatus: [
          {
            required: true,
            message: "请选择积分是否清零",
            validator: validatePass,
            trigger: "blur",
          },
        ],
        threshold: [
          {
            required: true,
            message: "请输入满多少可使用积分抵现",
            validator: validatePass,
            trigger: "blur",
          },
        ],
        enable: [
          {
            required: true,
            message: "选择开启状态",
            validator: validatePass,
            trigger: "blur",
          },
        ],
        discountRate: [
          { validator: validateDiscountRate, trigger: 'blur' },
          {
            required: true,
            message: "请输入积分抵现比例",
            validator: validatePass,
            trigger: "blur",
          },
        ],
        maxDiscount: [
          {
            required: true,
            message: "请输入积分抵现上限",
            validator: validatePass,
            trigger: "blur",
          },
        ],
      },
    };
  },
  watch: {
    "formValidate.enable": function (n, o) {
      if (n == "0") {
        this.isEmit = true;
      } else {
        this.isEmit = false;
      }
    },
  },
  created() {
    this.getdata();
  },
  methods: {
    getdata() {
      creditForCash().then((res) => {
        if (res.success) {
          this.formValidate.clearStatus = res.result.clearStatus;
          this.formValidate.discountRate = res.result.discountRate;
          this.formValidate.enable = res.result.enable;
          this.formValidate.maxDiscount = res.result.maxDiscount;
          this.formValidate.pointRule = res.result.pointRule;
          this.formValidate.threshold = res.result.threshold;
        }
      });
    },
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          let params = {
            clearStatus: this.formValidate.clearStatus,
            discountRate: this.formValidate.discountRate,
            enable: this.formValidate.enable,
            maxDiscount: this.formValidate.maxDiscount,
            pointRule: this.formValidate.pointRule,
            threshold: this.formValidate.threshold,
          };
          setCreditForCash({
            configValue:JSON.stringify(params),
          }).then((res) => {
            if (res.success) {
              this.$Message.success("保存成功!");
            }
          });
        } else {
          this.$Message.error("提交失败!");
        }
      });
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    },
  },
};
</script>
<style lang='scss' scoped>
::v-deep .ivu-input {
  width: 300px;
}
</style>
